<template>
    <div>
        <c-header left-text="返回" title="我的房屋"></c-header>
        <van-collapse v-model="activeNames" :is-link="false">
            <van-collapse-item v-for="item in houses" :key="item.id" :title="item.roomNumber" :name="item.id">
                <van-grid :column-num="3">
                    <van-grid-item v-for="img in getImgList(item.images)" :key="img">
                        <van-image :src="img" @click="imagePreview(img)" />
                    </van-grid-item>
                </van-grid>
                <van-cell-group>
                    <van-cell title="价格" :value="item.price" />
                    <van-cell title="大小" :value="item.size" />
                    <van-cell title="户型" :value="item.type" />
                    <van-cell title="详情" :value="item.detail" />
                </van-cell-group>
            </van-collapse-item>
        </van-collapse>
    </div>
</template>

<script>
import api from "../../api";
import { ImagePreview } from "vant";
export default {
    name: "house",
    data() {
        return {
            UserId: "",
            houses: [],
            activeNames: [],
            imgList: [],
        };
    },
    mounted() {
        this.UserId = JSON.parse(localStorage.getItem("userInfo")).id;
        this.getUserRoom();
    },
    methods: {
        async getUserRoom() {
            const response = await api.user.getRoomByUserId({
                UserId: this.UserId,
            });
            this.houses = response.data.data;
        },
        getImgList(val) {
            if (val) {
                return val.split(",");
            } else {
                return [];
            }
        },
        imagePreview(val) {
            ImagePreview([val]);
        },
    },
};
</script>

<style lang='less' scoped>
</style>